/**
 * 认证页面
 */
import React from 'react';
import {withRouter} from 'react-router-dom';
import {Card, Steps} from 'antd';
import {getParam} from '@/common/Util';

import GetCode from './Ui/Password/getCode';
import ResetPassword from './Ui/Password/resetPassword';
import Success from './Ui/Password/success';

import '@/css/pages/Passward.css';

const Step = Steps.Step;

const steps = [{
  title: '身份校验',
  content: '身份校验',
}, {
  title: '设置新密码',
  content: '设置新密码',
}, {
  title: '完成',
  content: '完成',
}];

@withRouter
export default class ModifyPassword extends React.PureComponent {
  state={
    currentStep: 0
  }
  componentWillReceiveProps(nextProps){
    this.calculateStep(nextProps);
  }
  componentWillMount(){
    this.calculateStep(this.props);
  }
  calculateStep = (props) =>{
    const {location} = props;
    let currentStep = 0;
    if (location.search) {
      currentStep = Number(getParam(location.search, 'step'));
    }
    this.setState({
      currentStep,
    });
  }
  setCurrentStep = (num) => {
    this.setState({
      currentStep: num || 0
    });
  }
  render () {
    const {currentStep} = this.state;
    return (
      <div className="page-password page-forget">
        <Card title="修改密码" bordered={false} >
        <Steps current={currentStep} className="page-password-steps">
          {steps.map(item => <Step key={item.title} title={item.title} />)}
        </Steps>
        <div className="page-password-tab" style={{display: currentStep === 0 ? 'block': 'none'}}>
         <GetCode />
        </div>
        <div className="page-password-tab" style={{display: currentStep === 1 ? 'block': 'none'}}>
         <ResetPassword />
        </div>
        <div className="page-password-tab" style={{display: currentStep === 2 ? 'block': 'none'}}>
         <Success current={currentStep}/>
        </div>
        </Card>
      </div>
    );
  }
}
